<template>
	<view class="article-panel">

		<view class="article-box">
			<view class="article-box-item">
				{{newName}}
			</view>
		</view>

		<view class="article-table">

			<unicloud-db ref="udb" v-slot:default="{data, loading, error, options,pagination}" style="height:100%"
				collection="news-articles" loadtime="manual" :orderby="orderby" :page-current="options.pageCurrent"
				:where="queryWhere">

				<view v-if="loading">
					<a-skeleton active />
				</view>

				<view v-if="error && !loading">{{error.message}}</view>

				<view v-else class="article-content-box">
					<view v-if="data.length" style="width: 100%;height:100% ;">

						<view class="article-content">
							<a-list item-layout="horizontal" :data-source="data">
								<template #renderItem="{ item }">
	

									<a-skeleton :title="false" :loading="!!item.loading" active>
										<a-list-item-meta>
											<template #title>

												<div class="article-info">
													<div class="article-title"
														@click="$topage('/pages/article/detail',{id:item._id},'new')">
														{{ item.title }}
													</div>
													<div class="article-date">
														<uni-dateformat :date="item.publish_date" :threshold="[0,0]">

														</uni-dateformat>
													</div>
												</div>


											</template>
										</a-list-item-meta>
										<a-divider/>

									</a-skeleton>


								</template>

							</a-list>
						</view>



						<view class="uni-pagination-box article-page" v-if="!loading &&  data.length">
							<uni-pagination show-i con :page-size="pagination.size" v-model="pagination.current"
								:total="pagination.count" @change="onPageChanged" />
						</view>

					</view>
					<view v-if="!loading && !data.length">
						<a-result status="404" title="404" sub-title="暂时没有更多数据">
							<template #extra>
								<a-button type="primary" @click="$topage('/pages/index/index',{a:'你好'},'close')">回到首页
								</a-button>
							</template>
						</a-result>
					</view>
				</view>
			</unicloud-db>

		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	const cmd = db.command
	// 分页配置
	const pageSize = 20
	const pageCurrent = 1

	export default {
		data() {
			return {
				orderby: '',
				newName: '',
				articleType: '',
				queryWhere: '',
				pageSizeIndex: 0,
				pageSizeOption: [20, 50, 100, 500],
				options: {
					pageSize,
					pageCurrent,
				},
			}
		},
		onLoad(options) {
			this.articleType = options.type
			this.newName = options.name
			this.queryWhere = {
				category_id: cmd.eq(this.articleType)
			}
		},

		onReady() {
			this.$refs.udb.loadData()

		},
		methods: {

		}
	}
</script>

<style>
	@import url('./article.css');
</style>
